<template>
  <div class="lun">
    <el-carousel class="lunbotu"
                 height="830px">
      <el-carousel-item v-for="item in lunbotu"
                        :key="item.id">
        <img :src="item.src"
             alt=""
             width="100%">
      </el-carousel-item>
    </el-carousel>
    <Funcontent class="fun"></Funcontent>
  </div>
</template>

<script>
import onejpg from '@/assets/1.jpg'
import twojpg from '@/assets/2.jpg'
import threejpg from '@/assets/3.jpg'
import fourjpg from '@/assets/4.jpg'
import Funcontent from './Funcontent.vue'

export default {
  name: 'Lun',
  data () {
    return {
      lunbotu: [{
        id: 1,
        src: onejpg,
      }, {
        id: 2,
        src: twojpg,
      }, {
        id: 3,
        src: threejpg,
      }, {
        id: 4,
        src: fourjpg,
      }],
    }
  },
  components: {
    Funcontent,
  }
}
</script>
<style lang="scss" scoped>
.lun {
  position: relative;
  .fun {
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 200px;
  }
}
</style>